<template>
  <div>
    <div class="userinfo">
      <div class="zan-row">
        <div class="zan-col zan-col-4  zan-col-offset-2 userinfo-avatar">
          <open-data type="userAvatarUrl"></open-data>
        </div>
        <div class="zan-col zan-col-8 zan-col-offset-2 userinfo-nickname">
          <open-data type="userNickName" lang="zh_CN"></open-data>
        </div>
      </div>

      <div class="zan-panel" style="margin-top:30rpx;">
        <div class="zan-cell">
          <div class="zan-cell__icon zan-icon zan-icon-location" style="color:#ff4343"></div>
          <div class="zan-cell__bd">绑定房间</div>
          <div class="zan-cell__ft"></div>
        </div>
        <div class="zan-cell">
          <div class="zan-cell__icon zan-icon zan-icon-contact" style="color:#ff4343"></div>
          <div class="zan-cell__bd">个人信息</div>
          <div class="zan-cell__ft"></div>
        </div>
        <div class="zan-cell">
          <div class="zan-cell__icon zan-icon zan-icon-home" style="color:#ff4343"></div>
          <div class="zan-cell__bd">我的报修</div>
          <div class="zan-cell__ft"></div>
        </div>
        <div class="zan-cell">
          <div class="zan-cell__icon zan-icon zan-icon-pending-orders" style="color:#ff4343"></div>
          <div class="zan-cell__bd">提交建议</div>
          <div class="zan-cell__ft"></div>
        </div>
        <div class="zan-cell">
          <div class="zan-cell__icon zan-icon zan-icon-setting" style="color:#ff4343"></div>
          <div class="zan-cell__bd">设置</div>
          <div class="zan-cell__ft"></div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    };
  },

  components: {},

  methods: {},

  created() {}
};
</script>

<style>
.userinfo {
  background-color: #cf512c;
  height: 260rpx;
}

.userinfo-avatar {
  overflow: hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.userinfo-nickname {
  line-height: 260rpx;
  color: #fff;
}
</style>
